<abp-page [title]="'AbpTenantManagement::Tenants' | abpLocalization" [toolbar]="data.items">
  <div id="wrapper" class="card">
    <div class="card-body">
      <div id="data-tables-table-filter" class="data-tables-filter mb-3">
        <div class="input-group">
          <input
            type="search"
            class="form-control"
            [placeholder]="'AbpUi::PagerSearch' | abpLocalization"
            [(ngModel)]="list.filter"
          />
        </div>
      </div>

      <abp-extensible-table
        [data]="data.items || []"
        [recordsTotal]="data.totalCount || 0"
        [list]="list"
      ></abp-extensible-table>
    </div>
  </div>

  <abp-modal [(visible)]="isModalVisible" [busy]="modalBusy">
    <ng-template #abpHeader>
      <h3>
        {{
          (selected?.id ? 'AbpTenantManagement::Edit' : 'AbpTenantManagement::NewTenant')
            | abpLocalization
        }}
      </h3>
    </ng-template>

    <ng-template #abpBody>
      <form [formGroup]="tenantForm" (ngSubmit)="save()" [validateOnSubmit]="true">
        <abp-extensible-form [selectedRecord]="selected"></abp-extensible-form>
      </form>
    </ng-template>

    <ng-template #abpFooter>
      <button abpClose type="button" class="btn btn-outline-primary">
        {{ 'AbpTenantManagement::Cancel' | abpLocalization }}
      </button>
      <abp-button iconClass="fa fa-check" (click)="save()" [disabled]="tenantForm?.invalid">{{
        'AbpTenantManagement::Save' | abpLocalization
      }}</abp-button>
    </ng-template>
  </abp-modal>

  <abp-feature-management
    *abpReplaceableTemplate="{
      inputs: {
        providerName: { value: 'T' },
        providerKey: { value: providerKey },
        visible: { value: visibleFeatures, twoWay: true }
      },
      outputs: { visibleChange: $any(onVisibleFeaturesChange) },
      componentKey: featureManagementKey
    }"
    [(visible)]="visibleFeatures"
    providerName="T"
    [providerKey]="providerKey"
  >
  </abp-feature-management>
</abp-page>
